<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>区域选择</title>
<link rel="stylesheet" type="text/css" href="css/weal.css"/>
<link rel="stylesheet" type="text/css" href="css/areaSel.css"/>
</head>

<body>

<!--新增任务弹窗-->
<div id="addTaskMask"v-show="addStatu">
	<div class="mask"></div>
	<div class="addTask">
		<div class="head dm-clearfix">
			<h4 class="bt dm-left">区域选择</h4>
			<a class="close-btn" @click="closeMask">×</a>
		</div>
		<ol class="cityMod dm-clearfix">
			<li class="dm-left cityWrap">
				<div class="cityModel">
					
					<ul class="mod" v-for="item in areaData">
						<li class="convince">
							<label><input type="checkbox" @change="check(0,$event)"  :id="item.id" class="checkbox" :value='item.id' />{{item.name}}</label>
						</li>
						<li class="box">
							<ul class="city-list" v-for="cityData in item.sub">
								<li class="city">
									<label><input type="checkbox" @change="check(1,$event)" :id='cityData.id' class="checkbox" :value='cityData.id' />{{cityData.name}}</label>
								</li>
								<li class="store-list">
									<div class="store" v-for="storeData in cityData.store">
										<label><input type="checkbox" @change="check(2,$event)" :id='storeData.id' class="checkbox" :value='storeData.id' />{{storeData.name}}</label>
									</div>
								</li>
							</ul>
						</li>
					</ul>
					
				</div>
			</li>
			<li class="dm-left btn-wrap">
				<div class="btn-mod">
					<a class="add-btn bg-m" @click="addStore">添加</a>
					<a :class="{ 'del-btn':true, 'disabled':isA}" @click="delArea">删除</a>
				</div>
			</li>
			<li class="dm-left selected">
				<div class="selModel">
					<span v-for="item in selData" :data-id="item.id" @click="selArea($event)">{{item.name}}</span>
				</div>
			</li>
		</ol>
	</div>
</div>

<script src="js/lib/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
<script src="data/data.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

var vm = new Vue({
	el:'#addTaskMask',
	data:{
		addStatu:true,
		areaData:data.area,
		selData:null,
		isA:true,
	},
	methods:{
		
		//关闭
		closeMask:function(){
			var that = this;
			that.addStatu = false;
		},
		
		//选择
		check:function(type,e){
			var that = this;
			var target = e.currentTarget;
			var val = target.value;
			var statu = target.checked;
			var obj = $('#'+target.id);
			var node = obj.parents('.mod');
			
			if(type==0){
				if(statu){
					node.find('.checkbox').prop('checked',true);
				}else{
					node.find('.checkbox').prop('checked',false);
				};
			}else if(type==1){
				
				if(statu){
					obj.parents('.city').next().find('.checkbox').prop('checked',true);
				}else{
					obj.parents('.city').next().find('.checkbox').prop('checked',false);
				};
				
				that.convinceCheck(obj,node);
				
			}else{
				that.cityCheck(obj,node);
			};
			
		},
		
		//根据城市选中数判断省份是否勾选
		convinceCheck:function(obj,node){
			var len = node.find('.city').length;
			var num = node.find('.city').find('.checkbox:checked').length;
			if(num == len){
				node.find('.convince .checkbox').prop('checked',true);
			}else{
				node.find('.convince .checkbox').prop('checked',false);
			};
		},
		
		//根据门店选择数判断城市是否勾选
		cityCheck:function(obj,node){
			var that = this;
			var len = obj.parents('.store-list').find('.store').length;
			var num = obj.parents('.store-list').find('.store .checkbox:checked').length;
			
			if(num == len){
				obj.parents('.store-list').prev().find('.checkbox').prop('checked',true);
			}else{
				obj.parents('.store-list').prev().find('.checkbox').prop('checked',false);
			};
			
			that.convinceCheck(obj,node);
		},
		
		//添加按钮
		addStore:function(){
			var that = this;
			var arr = [];
			$(".cityModel .mod").each(function(){
				var mod = $(this);
				if( mod.find('.convince .checkbox').prop('checked') ){
					let obj = {id:mod.find('.convince .checkbox').val(),name:mod.find('.convince').text()};
					arr.push(obj);
				}else{
					
					mod.find('.city-list').each(function(){
						var city = $(this);
						if( city.find('.city .checkbox').prop('checked') ){
							let obj = {id:city.find('.city .checkbox').val(),name:city.find('.city').text()};
							arr.push(obj);
						}else{
							
							city.find('.store').each(function(){
								
								var store = $(this);
								if( store.find('.checkbox').prop('checked') ){
									let obj = {id:store.find('.checkbox').val(),name:store.text()};
									arr.push(obj);
								};
								
							});
							
						};
					});
					
				};
			});
			
			that.selData = arr;
			if(arr.length > 0){
				that.isA = false;
			}else{
				that.isA = true;
			};
		},
		
		//选择要删除的
		selArea:function(e){
			var target = e.currentTarget;
			var id = target.getAttribute('data-id');
			if(target.className.indexOf('on') < 0){
				target.className = 'on';
			}else{
				target.className = '';
			};
		},
		
		//删除
		delArea:function(){
			var target;
		},
	},
});

</script>

</body>
</html>
